<template>
  <div>
    <div class="div-label">
      <label
        >上传文件，仅支持<span style="font-weight: bold">.png .jpeg</span
        >格式的Excel文件，且大小不超过<span
          style="font-weight: bold; color: red"
          >10MB</span
        ></label
      >
    </div>
    <el-upload
      list-type="picture-card"
      class="upload-demo"
      ref="upload"
      action
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :multiple="true"
      accept="image/png,image/jpeg"
      :limit="2"
      :file-list="fileList"
      :auto-upload="false"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <i class="el-icon-plus"></i>
      <!-- <el-button slot="trigger" size="medium" type="primary">选取文件</el-button> -->
      <!-- <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">上传到服务器</el-button> -->
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    // 超过文件上传最大个数
    handleExceed(files, fileList) {
      console.log(files, fileList);
      this.$message.warning("很抱歉当前支持最大上传文件个数为 2 个！");
    },
    // 文件上传到服务器之前的文件校验
    beforeUpload(file) {
      console.log("文件", file);
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      const size = file.size / 1024 / 1024;
      if (extension !== "png" && extension !== "jpeg" && extension !== "jpg") {
        // 校验文件格式
        this.$message.warning("只支持上传后缀名为.xlsx的Excel文件");
      }
      if (size > 10) {
        // 校验文件大小
        this.$message.warning("文件大小不能超过10MB");
      }
    },
    // 文件状态改变
    handleChange(file, fileList) {
      if (file) {
        this.fileList = fileList.slice(-3);
      }
    },
    // 文件删除时
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = []; // 文件列表置空
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    // 文件上传成功
    handleSuccess(response, file, fileList) {
      console.log("-------handleSuccess-------");
      console.log(response);
      this.$message.success("文件 [" + file.name + "] 上传成功");
    },
    // 文件上传失败
    handleError(err, file, fileList) {
      console.log("-------handleError-------");
      console.log(err);
      this.$message.error("文件上传失败");
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    httpRequest(param) {
      console.log(param);
      const fileObj = param.file; // 获取file文件
      const formData = new FormData(); // FormData对象
      formData.append("file", fileObj); // file封装到FormData里
      // 请求后台上传数据的接口
      this.$http({
        url: this.$http.adornUrl("/product/category/update/sort"),
        method: "post",
        data: this.$http.adornData(this.updateNodes, false),
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //从新请求数据
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKeys = [this.pCid];
        this.updateNodes = [];
        this.maxLevel = 0;
        //this.pCid = 0;
      });

      this.$http
        .post("localhost:88/api/thirdParty/aliOss/uploadPic", formData, {
          headers: { "Content-Type": "multipart/form-data" },
          // url: '/upload',
          // data: formData
          // method: 'post'
        })
        .then(
          (res) => {
            console.log("-------res--------");
            console.log(res);
            if (res.data.meta.status === "0") {
              this.$message.success(res.data.meta.msg);
              // 清空文件列表
              this.fileList = [];
            } else {
              this.$message.error(res.data.meta.msg);
            }
          },
          (err) => {
            console.log("-------err--------");
            console.log(err);
            this.$message.error(
              "上传文件内容有问题，请保证上传文件字段均不为空且正确"
            );
          }
        );
    },
    // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        // 上传文件列表为空
        this.$message.warning("请选择一个上传文件");
      } else {
        // 执行上传操作
        this.$refs.upload.submit();
      }
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>